<script lang="ts" setup>
import { ArrowDown, ArrowRight } from '@element-plus/icons-vue'
import type { TabsPaneContext } from 'element-plus'

import { topicContent } from '~/content/topic'

onMounted(() => {
  getData()
})

const dataList: any = ref([])
const dirActive: any = ref('')
const dirList: any = ref([])
const contentHtml = ref('')

async function getData() {
  dataList.value = [
    {
      isShow: true,
      date: '3月20日',
      title: '客户管理',
      list: [
        { id: 1001, name: 'ping', html: topicContent, utime: '2025-01-20 17:19:00', method: 'POST' },
        { id: 1002, name: 'pong', html: topicContent, utime: '2025-01-21 17:19:00', method: 'GET' },
      ],
    },

  ]
  // 设置默认选中
  if (dataList.value.length && dataList.value[0].list && dataList.value[0].list.length) {
    handleClick(dataList.value[0].list[0])
  }
}

function getDirList() {
  if (!contentHtml.value) {
    dirList.value = []
    return
  }
  const parser = new DOMParser()
  const doc = parser.parseFromString(contentHtml.value, 'text/html')
  const aArr: any = doc.querySelectorAll('a')
  const tocs: any = []
  for (let i = 0; i < aArr.length; i++) {
    if (aArr[i].id) {
      const href = aArr[i].id
      const name = aArr[i].parentNode.textContent
      tocs.push({
        href,
        name,
      })
    }
  }
  dirList.value = tocs
}

function handleDir(val: TabsPaneContext) {
  /* eslint-disable-next-line ts/ban-ts-comment */
  // @ts-expect-error
  document.getElementById(val.props.name)?.scrollIntoView()
}

const activeData: any = ref({})
function handleClick(row: any) {
  activeData.value = row
  // 获取目录
  contentHtml.value = row.html || ''
  getDirList()
}
function handleShow(row: any) {
  row.isShow = !row.isShow
}

const router = useRouter()
function handleTest() {
  router.push(`/workspace`)
}
</script>

<template>
  <LayoutMain>
    <template #main>
      <section class="mx-5 my-3 min-w-300 flex-1 rounded-xl bg-white px-3 py-5">
        <header class="mb-4 h-9 flex items-center bg-[#f9f9f9] px-4">
          <span>我的文档</span>
        </header>
        <section class="flex">
          <aside class="mr-4 min-w-70 w-70 flex flex-col">
            <main class="flex-1 overflow-auto pr-1">
              <section v-for="(item, index) in dataList" :key="index">
                <header class="mb-2.5 flex cursor-pointer items-center" @click="handleShow(item)">
                  <span class="mr-1 flex items-center">
                    <el-icon v-if="item.isShow"><ArrowDown /></el-icon>
                    <el-icon v-else><ArrowRight /></el-icon>
                  </span>
                  <span class="text-sm color-[#30353e] font-bold">{{ item.title }}</span>
                </header>
                <section v-if="item.isShow">
                  <div
                    v-for="(ele, idx) in item.list"
                    :key="idx"
                    class="item-box flex items-center text-sm color-[#171b1f]"
                    :class="{ 'item-active': ele.id === activeData.id }"
                    @click="handleClick(ele)"
                  >
                    <div class="w-20 flex items-center">
                      <span class="rounded bg-[#5cb576] px-1.5 pt-0.5 font-size-2.5 color-white font-bold">
                        {{ ele.method }}
                      </span>
                    </div>
                    <div class="text-ellipsis" :title="ele.name">
                      {{ ele.name }}
                    </div>
                  </div>
                </section>
              </section>
            </main>
          </aside>
          <main
            class="mx-auto h-full max-w-262 min-w-150 flex flex-1 flex-col px-6 py-6"
          >
            <header class="flex items-center justify-between">
              <div class="text-lg color-[#171b1f] font-bold">
                <span>客户管理</span>
              </div>
              <div>
                <el-button type="primary" @click="handleTest">
                  去测试
                </el-button>
              </div>
            </header>
            <nav class="mb-4 text-sm">
              <span />
            </nav>
            <header class="mb-6">
              <div class="mb-1 text-2xl font-bold">
                {{ activeData.name }}
              </div>
              <div v-if="activeData.utime" class="text-3 color-[#999999]">
                <span>最近更新时间：</span>
                <span>{{ activeData.utime }}</span>
              </div>
            </header>
            <div
              id="markDown"
              class="markdown-body flex-1 overflow-auto pl-4 pr-4"
              v-html="contentHtml"
            />
          </main>
          <aside class="w-80 overflow-auto border-l-1 border-[#E4E4E4] p-5">
            <section class="mb-8 mt-11" />
            <section class="text-sm">
              <div class="mb-2">
                本篇目录
              </div>
              <div v-if="dirList.length" class="dir-wrap">
                <el-tabs v-model="dirActive" tab-position="right" @tab-click="handleDir">
                  <el-tab-pane
                    v-for="item in dirList"
                    :key="item.href"
                    :label="item.name"
                    :name="item.href"
                  >
                    <template #label>
                      <span class="dir-text">
                        <span>{{ item.name }}</span>
                      </span>
                    </template>
                  </el-tab-pane>
                </el-tabs>
              </div>
              <div v-else class="color-[#999999]">
                暂无目录
              </div>
            </section>
          </aside>
        </section>
      </section>
    </template>
  </LayoutMain>
</template>

<style lang="scss" scoped>
@use '~/assets/markdown.scss';
</style>

<style lang="scss" scoped>
.item-box {
  border-radius: 6px;
  height: 32px;
  padding: 0 16px;
  cursor: pointer;
  margin-bottom: 8px;
}

.item-active {
  background: #f5f5f5;
  font-weight: 700;
}
</style>
